<template>
  <!-- 佣金列表 -->
  <div class="profit-container">
    <table class="table">
      <thead>
        <tr>
          <th v-for="(item, i) of headers" :key="item">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) of tableData" :key="i">
          <td>{{ item.nickName }}</td>
          <td>$ {{ item.amount }}</td>
          <td>{{ item.level }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Api } from '@/api';
declare const $Vue: Vue;

@Component
export default class Profits extends Vue {

  private headers: Array<string> = [
    'Member',
    'Profit',
    'Level'
  ];

  private tableData: Array<any> = [
  //   {
  //   member: 'David',
  //   profit: 24,
  //   level: 1,
  // }, {
  //   member: 'Johnason',
  //   profit: 756,
  //   level: 2,
  // }, {
  //   member: 'Taylor',
  //   profit: 546,
  //   level: 2,
  // }, {
  //   member: 'Calise',
  //   profit: 257,
  //   level: 2,
  // }
  ];

  protected mounted() {
    $Vue.$emit('title', {
      message: 'My Profits'
    });
    this.getProfitMembers();
  }

  private async getProfitMembers() {
    const params: any = {
    };
    const { data } = await Api.getProfitMembers.r(params);
    console.log("getProfitMembers", data);
    if (data.result === 0) {
      this.tableData = data.data;
    } else {
      this.$createToast({
        txt: "Something has gone wrong.",
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>


<style lang="less" scoped>
.profit-container {
  padding-top: 1rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
</style>

